<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止事件冒泡</title>
</head>
<style>
    .box1{
        width: 600px;
        height:600px;
        background: yellow;
    }
    .box2{
        width:400px;
        height:400px;
        background: orange;;
    }
 .box3{
     width:200px;
     height:200px;
     background: #58bc58;
 }
</style>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
    <script>
        var box1=document.querySelector('.box1')
        var box2=document.querySelector('.box2')
        var box3=document.querySelector('.box3')
        box3.onclick=function(e){
            alert('点击box3元素');
            e.stopPropagation();
            //停止事件的传播
            // e.cancelBubble=true取消冒泡
            }
        box2.onclick=function(){
             alert('点击box2元素')
        }
        box1.onclick=function(){
            alert('点击box1元素');
        }
        
    </script>
    
</body>
</html>